<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改文章')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
    <link type="text/css" rel="stylesheet" th:href="@{/ueditor/third-party/video-js/video-js.css}"/>
    <script type="text/javascript" th:src="@{/ueditor/third-party/video-js/video.js}"></script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-notice-edit" th:object="${sysNotice}">
        <input id="treeId" name="parentId" type="hidden" th:field="*{cloumnId}"/>
        <input id="noticeId" name="noticeId" th:field="*{noticeId}" type="hidden">
        <div class="form-group">
            <label class="col-sm-2 control-label">文章标题：</label>
            <div class="col-sm-10">
                <input id="noticeTitle" name="noticeTitle" th:field="*{noticeTitle}" class="form-control" type="text"
                       required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">副标题：</label>
            <div class="col-sm-10">
                <input name="subtitle" th:field="*{subtitle}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label ">文章栏目：</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input class="form-control" type="text" id="treeName" onclick="selectDeptTree()" readonly="true"
                           th:value="${sysCloumn.name}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章来源：</label>
            <div class="col-sm-10">
                <input name="comeFrom" th:field="*{comefrom}" class="form-control" type="text" required>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-2 control-label">创建时间：</label>
            <div class="col-sm-10">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input name="createTime" th:value="${#dates.format(sysNotice.createTime, 'yyyy-MM-dd HH:mm:ss')}"
                           type="text" class="form-control" id="laydate-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
                </div>
            </div>
        </div>
        <div class="form-group" style="display: none;">
            <label class="col-sm-2 control-label">文章摘要：</label>
            <div class="col-sm-10">
                <input name="remark" th:field="*{remark}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">轮播图：</label>
            <div class="col-sm-10">
                <input id="imgfiles" name="file" accept=".png,.jpg,.gif,.bmp,.jpeg" class="form-control" type="file">
                <input name="imageurl" id="imageurl" th:field="*{imageurl}" type="hidden">

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">是否轮播：</label>
            <div class="col-sm-10">
                <label class="toggle-switch switch-solid">
                    <input type="checkbox" id="isShuffling" th:checked="${sysNotice.isShuffling == 1 ? true : false}">
                    <span></span>
                </label>
            </div>
        </div>
        <div class="form-group" id="div2">
            <label class="col-sm-2 control-label">轮播位置：</label>
            <div class="col-sm-10">
                <select name="shufflingType" th:with="type=${@dict.getType('shuffling_type')}" class="form-control ">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{shufflingType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章内容：</label>
            <div class="col-sm-10">
                <textarea id="editors" th:field="*{noticeContent}" type="text/plain" style="width:1024px;height:500px;"
                          name="noticeContent"></textarea>
            </div>
        </div>
      <!--  <div class="form-group">
            <label class="col-sm-2 control-label">文章状态：</label>
            <div class="col-sm-10">
                <label class="toggle-switch switch-solid">
                    <input type="checkbox" id="status"  th:checked="${sysNotice.status == 0 ? true : false}">
                    <span></span>
                </label>
            </div>
        </div>-->
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    var prefix = ctx + "system/notice";
    var pre = ctx + "system/cloumn";
    var isShuffling = $("input[id='isShuffling']").is(':checked') == true ? 1 : 0;
    if (isShuffling == 0) {
        $("#div2").attr("style", "display:none;");
    } else {
        $("#div2").attr("style", "display:block;");
    }
    $("#datetimepicker-demo-3").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",
        autoclose: true
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#laydate-demo-3',
            type: 'datetime',
            trigger: 'click'
        });
    });
    $("#isShuffling").on("change",function  () {
        var isShuffling = $("input[id='isShuffling']").is(':checked') == true ? 1 : 0;
        if (isShuffling == 0) {
            $("#div2").attr("style", "display:none;");
        } else {
            $("#div2").attr("style", "display:block;");
        }
    })
    $(document).ready(function () {
    $("#imgfiles").fileinput({
        language: 'zh', //设置语言
        'showUpload': true,
        'previewFileType': 'image',
        'showPreview': true,
        'showClose': false,
        allowedFileExtensions: ["png", "jpg", "gif", "bmp", "jpeg"],//接收的文件后缀
        uploadAsync: true, //默认异步上传
        uploadUrl: ctx + "common/upload", //上传的地址
        dropZoneEnabled: false,//是否显示拖拽区域
        autoReplaceBoolean: false,//选择图片时不清空原图片
        maxFileCount: 9,
        initialPreviewAsData: true,
        initialPreview: [$("#imageurl").val()],
        deleteUrl: ""
      });
    });
    var img_urls = "";
    $('#imgfiles').on('fileuploaded', function (event, data, previewId, index) {
        if (typeof (data.response.url) != 'undefined') {
            img_urls = img_urls + data.response.url;
            $("#imageurl").val(img_urls);
        }
    });
    $("#form-notice-edit").validate({
        focusCleanup: true
    });

    function selectDeptTree() {
        var deptId = $("#treeId").val();
        if (deptId > 0) {
            var options = {
                title: '栏目选择',
                width: "380",
                url: pre + "/selectTree/" + $("#treeId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        } else {
            $.modal.alertError("一级栏目不能选择");
        }
    }

    function doSubmit(index, layero) {
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }

    var ue = UE.getEditor('editors', {});

    $(function () {
        var ue = UE.getEditor('editors')
        ue.addListener("ready", function () {
        });
    });

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-notice-edit").serializeArray();
            var isShuffling = $("input[id='isShuffling']").is(':checked') == true ? 1 : 0;
            data.push({"name": "isShuffling", "value": isShuffling});
          /*  var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
            data.push({"name": " status", "value":status});*/
            $.operate.save(prefix + "/edit", data);
        }
    }
</script>
</body>
</html>
